<template>
  <view class="page video-center-page rec-bag-pop-page">
    <uni-navbar
      :border="false"
      :fixed="true"
      :height="barHeight"
      :rightWidth="120"
      :leftWidth="120"
      :leftIcon="!isMpWeixinH5"
      titleStyle="color:#fff;fontSize:18px;"
      :bgColor="isWhiteAppBar ? '#FF5500' : 'transparent'"
      :placeholder="false"
      :autoBack="false"
      :backNative="true"
    >
      <template #left>
        <image v-if="isH5 && !isMpWeixinH5" src="../../static/images/back_white2.png" class="back-icon" style="margin-left: -10rpx;"></image>
        <text style="font-size:36rpx;font-weight:bold;color:#fff;">第1集</text>
      </template>
      <template #right>
        <text style="font-size:36rpx;font-weight:bold;color:#fff;" @click="toWatchHistory">观看记录</text>
      </template>
    </uni-navbar>

    <view
      class="box-1"
      :style="{paddingTop: 0}"
    >
      <view v-if="isLogin" class="inner-cont">
        <!-- <view style="padding-left:48rpx;color:#fff;text-align:left;align-items: flex-end;" class="flex" @tap="toCoinDetails">
          <text style="font-size: 80rpx;height:80rpx; line-height: 80rpx;margin-right:16rpx;" @click="toMyCoin">{{golds}}</text>
          <text>金币</text>
        </view>
     -->

        <swiper class="swiper" 
          :circular="false" 
          :vertical="true"
          :current="currentIdx"
          :indicator-dots="false" 
          :autoplay="false" 
          :interval="5000"
          :duration="500"
          @change="swiperChange"
        >
          <swiper-item class="swiper-item" v-for="item in videoList" :key="item.id" @click="clickVideo">
            <view class="swiper-item-dom" :id="item.id" :ref="item.id"></view>
            <view class="beisu" @click.stop="showBeisu">
              <image :src="staticHost + '/video_speed.png'" style="width:56rpx;" mode="widthFix"></image>
              <view>倍速</view>
            </view>

            <image :src="staticHost + '/video_zan.png'" 
              style="width:56rpx;" mode="widthFix"
              @click.stop="loveEv"
            ></image>
          </swiper-item>
        </swiper>
      </view>
    </view>

    <view class="irght-info">
      <view>ID：{{curVideoInfo.id}}</view>
      <view>自动播放：{{curVideoInfo.autoplay}}</view>
    </view>

    <OnlineCircle></OnlineCircle>

    <u-popup
      v-model="visibleVideoSpeed"
      mode="bottom"
      :mask-close-able="true"
      width="100%"
      border-radius="48"
      height="auto"
      z-index="10080"
      @close="visibleVideoSpeed=false"
    >
      <view class="speed-hd">
        倍速
      </view>
      <view class="speed-content">
        <view v-for="item in speedConf" :key="item.id" 
          :class="['speed-option', curVideoInfo.speed == item.value? 'active' : '']"
          @click="changePlaySpeed(item)"
        >
          {{item.label}}
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { isMpAlipay, isMpBaidu, isMpToutiao, isMpKuaishou, isH5 } from '@/utils/platform';
import statusBarInfo from '@/pages/welfare/mixins/statusBarInfo'
import OnlineCircle from './components/OnlineCircle'

import DPlayer from 'dplayer';

const app = getApp();
// import { encryptFn } from '@/utils/index'
// import { getRandomInt } from '@/utils/util'

// import { SignNew } from '@/pages/welfare/api/index';
import { serviceMobile, staticHost } from '@/setting';

export default {
  mixins: [ statusBarInfo ],
  components: {
    OnlineCircle
  },
  computed: {
    curVideoInfo() {
      if (this.currentIdx >= 0) {
        return this.videoList[this.currentIdx];
      }
      return {};
    }
  },
  data() {
    return {
      visibleVideoSpeed: false,
      isMpAlipay,
      isH5,
      contactsMobile: serviceMobile,
      isWhiteAppBar: false,
      staticHost,
      isLogin: true,
      isMpWeixinH5: false,
      curSpeed: 1,
      speedConf: [
        { id: 'sp_1', value: 2, label: '2X' },
        { id: 'sp_2', value: 1.75, label: '1.75X' },
        { id: 'sp_3', value: 1.5, label: '1.5X' },
        { id: 'sp_4', value: 1.25, label: '1.25X' },
        { id: 'sp_5', value: 1, label: '1.0X(默认)' },
        { id: 'sp_6', value: 0.75, label: '0.75X' },
      ],
      videoList: [
        { id: 'v_s1', url: 'https://www.szaluola.com/videos/video-1.mp4', muted: true, speed: 1, dplayer: null },
        { id: 'v_s2', url: 'https://www.szaluola.com/videos/video-2.mp4', muted: true, speed: 1, dplayer: null },
        { id: 'v_s3', url: 'https://www.szaluola.com/videos/video-3.mp4', muted: true, speed: 1, dplayer: null },
        { id: 'v_s4', url: 'https://www.szaluola.com/videos/video-4.mp4', muted: true, speed: 1, dplayer: null },
      ],
      currentIdx: 2,
      cg: 0,
      menuBottom: isMpAlipay ? 16: 0,
    };
  },
  onLoad() {
    let _self = this;
    if (isMpBaidu || isMpAlipay || isMpToutiao || isMpKuaishou) {
      let userInfo = app.globalData.userInfo;

      if (userInfo && userInfo.userId) {
        if (this.$uma && this.$uma.trackEvent) {
          this.$uma.trackEvent('enter_sign', userInfo);
        }
      }
      
      if (!userInfo || !userInfo.userId) {
        setTimeout(() => {
          // 跳转登录
          this.$navigateTo('/pages/login/phone')
        }, 1000)
      }
    }
    
    function ready() {
      console.log('ready 是否是小程序::', window.__wxjs_environment === 'miniprogram');
      if (window.__wxjs_environment === 'miniprogram') {
        // 是小程序环境
        _self.isMpWeixinH5 = true;
      }
    }
    if (isH5) {
      setTimeout(() => {
        if (!window.WeixinJSBridge || !window.WeixinJSBridge.invoke) {
          console.log('开始监听window.ev.WeixinJSBridgeReady');
          document.addEventListener('WeixinJSBridgeReady', ready, false)
        } else {
          ready()
        }
      }, 500)
    }
  },
  onShow() {
    if (isMpAlipay || isMpBaidu || isMpToutiao || isMpKuaishou) {
      let userInfo = app.globalData.userInfo;
      if (userInfo && userInfo.userId) {
        this.isLogin = true;
      } else {
        this.isLogin = false;
      }
    }
     
    setTimeout(() => {
      if (!this.curVideoInfo.dplayer) {
        this.initVideo();
      }
      // this.muted = true;
      // this.playVideo(this.videoList[0].id);
    }, 200)
  },
  options: { styleIsolation: 'shared' },
  methods: {
    toWatchHistory() {
      this.$navigateTo('/pages/welfare/watchHistory')
    },
    initVideo(obj) {
      let curVideo = obj || this.curVideoInfo;
      let dplayer = new DPlayer({
        autoplay: true,
        container: document.getElementById(curVideo.id),
        video: {
          url: curVideo.url,
        },
      });

      curVideo.dplayer = dplayer;
      dplayer.on('play', this.onPlay)
      dplayer.on('pause', this.onPause)
      dplayer.on('ended', this.onEnded)
    },
    swiperChange(e) {
      if (e.detail.current >=0) {
        this.stopVideo()
        this.currentIdx = e.detail.current; 

        let obj = this.videoList[this.currentIdx]
        if (!obj.dplayer) {
          this.initVideo(obj);
        } else {
          obj.dplayer.play();
        }
      }
    },
    playVideo(item) {
      let video = item || this.curVideoInfo;
      if (video.dplayer) {
        video.dplayer.play()
      }
    },
    stopVideo(item) {
      let video = item || this.curVideoInfo;
      if (video.dplayer) {
        video.dplayer.pause()
      }
    },
    clickVideo(e) {
      if (String(e.target.id).indexOf('v_s') == -1) {
        return;
      }
      let current = this.videoList[this.currentIdx]
      console.log('clickVideo > ', e , current);

      if (current && current.dplayer) {
        if (current.dplayer.paused) {
          this.playVideo(current)
        } else {
          this.stopVideo(current)
        }
      }
    },
    onPlay(e) {
    },
    onPause(e) {
    },
    onEnded(e) {
      console.log('onEnded>' ,e );
      let list = this.videoList
      if (this.currentIdx == list.length -1) {
        this.currentIdx = 0;
      } else {
        this.currentIdx = this.currentIdx + 1;
      }
    },
    progressEv(e) {
      // console.log('progressEv>' ,e );
    },
    seekedEv(e) {
      console.log('seekedEv>' ,e );
    },
    onSeeking(e) {
      console.log('onSeeking>' ,e );
    },
    timeupdateEv(e) {
      // console.log('timeupdateEv>' ,e );
    },
    
    toLogin() {
      this.$navigateTo('/pages/login/phone')
    },
    toCoinDetails() {
      this.$navigateTo('/pages/welfare/coinDetails')
    },
    toMyCoin() {
      // this.common.routerPush('/myCoin')
    },
    showBeisu(e) {
      this.visibleVideoSpeed = true;
    },
    changePlaySpeed(item) {
      this.curVideoInfo.speed = item.value;
      if (this.curVideoInfo.dplayer) {
        this.curVideoInfo.dplayer.speed(item.value);
        this.visibleVideoSpeed = false;
      }
    },
    loveEv() {

    }
  },
};
</script>
<style lang="scss" scoped>
  .video-center-page {
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    height: 100%;

    v-deep .u-swiper {
      margin-left: 0;
    }

    .irght-info {
      position: fixed;
      right: 0;;
      bottom:120px;
      background: #f50;
      color: #fff;
      z-index: 10000;
    }

    .box-1 {
      position: relative;
      margin-bottom: 16rpx;
      background: linear-gradient(180deg,#f50,#F9EEE7);
      height: 100%;
      

      .inner-cont {
        position:relative;
        width: 100%;
        height: 100%;

        .swiper {
          width: 100%;
          height: 100%;
        }
      }

      .swiper-item {
        width: 100vw;
        height: 100%;
        position: relative;

        .swiper-item-dom {
          position: relative;
          width: 100%;
          height: 100%;
        }
        .beisu {
          position: absolute;
          bottom: 20rpx;
          left: 32rpx;
          color: #fff;
          font-size: 24rpx;
        }         

        .item-video {
          width: 100%;
          height: 100%;
        }
      }

    }
  }

  .speed-hd {
    padding: 60rpx 0px 48rpx;
    text-align: center;
    font-size: 36rpx;
    font-weight: bold;
  }
  .speed-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 24px 200px;

    .speed-option {
      width: calc((100vw - 72px) / 3);
      background: #EFEFEF;
      border-radius: 2px;
      text-align: center;
      height: 40px;
      line-height: 40px;
      margin-bottom: 12px;
      border-radius: 16rpx;

      &.active {
        background: #FFE9EA;
        color:#FF282D;
      }
    }
  }
</style>
